/**
 * Created by GUO on 2017/5/19.
 * @flow
 * 我的
 */

import React from 'react';
import {
    View,
    Text,
    StyleSheet,
    Image,
    TouchableOpacity,
    SectionList,
    PixelRatio,
} from 'react-native';
import BaseScreen from '../BaseScreen';
import Icon from 'react-native-vector-icons/MaterialIcons';

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:'center',
        justifyContent:'center',
    },
    titleBarIcon:{
        paddingHorizontal:10,
    },
    user:{
        flexDirection:'row',
        alignItems:'center',
        backgroundColor:'white',
        paddingHorizontal:24,
        paddingVertical:16,
        marginTop:8,
    },
    avatar:{
        width:60,
        height:60,
    },
    nickname:{
        fontSize:18,
        color:'black',
        marginLeft:16,
    },
    sectionItem:{
        height:8,
    },
    item:{
        height:48,
        flexDirection:'row',
        paddingHorizontal:16,
        alignItems:'center',
        borderBottomWidth:1/ PixelRatio.get(),
        borderColor:'#eaeaea',
        backgroundColor:'white'
    },
    itemText:{
        marginLeft:16,
        fontSize:16,
        color:'black'
    }
});

export default class UserScreen extends BaseScreen {

    static navigationOptions = {
        title: '我的',
        tabBarIcon: ({ tintColor }) => (
            <Icon size={26} color={tintColor} name="person"/>
        ),
        headerRight:(<Icon
            name="settings"
            size={24}
            color="white"
            style={styles.titleBarIcon}/>)
    };

    sections = [
        {key:'0',data:[
            {name:'我的待读',icon:'bookmark-border',color:'#0AA284'},
            {name:'我的收藏',icon:'favorite-border',color:'#B80516'},
            {name:'我的推刊',icon:'credit-card',color:'#08B1DB'},
            {name:'消息通知',icon:'notifications-none',color:'#0AA284'},
            {name:'阅读历史',icon:'label-outline',color:'#3F7EDD'}
        ]},
        {key:'1',data:[
            {name:'夜读模式',icon:'brightness-4',color:'#08B1DB'},
            {name:'离线阅读',icon:'cloud-download',color:'#0AA183'},
            {name:'分享设置',icon:'share',color:'#FB7910'},
            {name:'检查更新',icon:'code',color:'#0AA284'},
            {name:'意见反馈',icon:'message',color:'#3F7EDD'},
            {name:'关于我们',icon:'info-outline',color:'#B80516'}
        ]}
    ];

    render(){
        return (
            <SectionList
                style = {{flex:1}}
                initialNumToRender = {12}
                keyExtractor = {(item,index) => item.name}
                ListHeaderComponent = {this._renderHeader.bind(this)}
                sections = {this.sections}
                renderSectionHeader={()=> <View style={styles.sectionItem}/>}
                renderItem = {this._renderItem.bind(this)}

            />
        );
    }

    _renderHeader(){
        return (
            <TouchableOpacity style={styles.user} activeOpacity={0.5}>
                <Image
                    style={styles.avatar}
                    source={{uri:'http://static0.tuicool.com/profile/4000909330_1435674651.png'}}/>
                <Text style={styles.nickname}>xwrite</Text>
            </TouchableOpacity>
        );
    }

    _renderItem({item}){
        return (
            <TouchableOpacity style={styles.item} activeOpacity={0.5}>
                <Icon name={item.icon} size={24} color={item.color}/>
                <Text style={styles.itemText}>{item.name}</Text>
            </TouchableOpacity>
        );
    }
}

